<template>
  <view class="content">
    <!-- <view class="tabs">
      <view
        class="item"
        @click="changeTab(item)"
        :class="{ check: checkTab === item.value }"
        v-for="item in tabs"
        :key="item.value"
      >
        {{ item.lable }}
      </view>
    </view> -->
    <view class="main">
      <view class="list">
        <view class="item box" v-for="item in list" :key="item.id">
          <view style="display: flex; justify-content: space-between">
            <view class="item-r">
              <view class="name">{{ item.name }}</view>
              <view class="time"
                >有效期至{{ filterTime(item.validEndTime) }}</view
              >
              <text
                class="limit"
                v-for="itemc in item.payWayNameList"
                :key="itemc"
              >
                {{ itemc }}
              </text>
            </view>
            <view class="item-l">
              <!-- <view class="time">{{
                discountTypeObj[item.discountType] || ""
              }}</view> -->
              <view class="time" v-if="item.discountType == 11"
                >{{
                  item.discountPrice / 100
                }}元</view
              >
              <view class="time-m" v-if="item.discountType == 11"
                >满{{
                 item.usePrice / 100
                }}元</view
              >
              <view class="time" v-if="item.discountType == 12"
                >{{
                  item.template?.discountTime
                }}折</view
              >
              <view class="time-m" v-if="item.discountType == 12"
                >满{{
                 item.template?.discountLimitTime
                }}小时</view
              >
              <view class="item-b" @click="goIndex">去使用</view>
            </view>
          </view>
          <view class="rules">
            <uni-collapse ref="collapse">
              <uni-collapse-item
                title="使用规则"
                title-border="none"
                :border="false"
              >
                <view class="content">
                  <text class="text" style="color: #999">{{
                    item.ruleDesc
                  }}</text>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </view>
        </view>
        <view class="no-data" v-if="!list.length">
          <image class="no-data-img" src="/static/no-data.png" />
          <view>暂无数据</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { listGroupBuy, getcoupon } from "@/service/index";
import dayjs from "dayjs";
const list = ref([
  //   {
  //     // 假数据
  //     discountType: 11,
  //     usePrice: 100,
  //     discountPrice: 11,
  //     payWayNameList: ["微信支付", "钱包支付"],
  //     validEndTime: "2025-01-23",
  //     name:'五千多驱动器五点前未到期威奇达',
  //     ruleDesc:
  //       "群文件地哦千万记得哦i近期我i第七届我ID就哦IQ忘记哦，请问i哦等级哦IQ叫我i，去外地青豌豆群文件哦ID就哦IQ忘记，清瘟解毒哦IQ叫我的",
  //   },
]);
const checkTab = ref(0);
const checkRuleId = ref(null);
const discountTypeObj = {
  11: "满减劵",
  12: "折扣券",
};
const tabs = [
  {
    lable: "全部",
    value: 0,
  },
  {
    lable: "时长券",
    value: 2,
  },
  {
    lable: "代金券",
    value: 3,
  },
];
const init = () => {
  getcoupon({ status: 1, pageNo: 1, pageSize: 100 }).then((res) => {
    console.log(res);
    list.value = res.list || [];
  });
};
const changeTab = (item) => {
  checkTab.value = item.value;
};
const goIndex = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};
const checkRule = (id) => {
  checkRuleId.value = checkRuleId.value === id ? null : id;
};
const filterTime = (date) => {
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
};
onMounted(() => {
  init();
});
</script>
<style lang="less" scoped>
.content {
  padding: 20rpx 0;
  .available,
  .noavailable {
    margin: 24rpx;
    padding: 24rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #ff5d15;
  }
  .noavailable {
    color: #999;
  }
  .tabs {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 88rpx;
    .item {
      position: relative;
      font-size: 28rpx;
      color: #333333;
      &.check {
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 4rpx;
          background-color: #009a44;
          bottom: -4rpx;
          left: 0;
        }
      }
    }
  }
  .main {
    .list {
      padding: 0 24rpx;

      .item {
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        margin-bottom: 24rpx;
        // height: 220rpx;
        padding: 24rpx;
        overflow: hidden;
        .item-l {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          //   margin-right: 28rpx;
          .time {
            font-size: 30rpx;
            font-weight: 600;
            color: #ff5d15;
            margin-bottom: 10rpx;
          }

          .time-m {
            background: rgba(255, 93, 21, 0.1);
            padding: 8rpx 12rpx;
            border-radius: 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #ff5d15;
            margin-bottom: 12rpx;
          }
        }
        .rule-desc {
          height: 200rpx;
          transition-property: height, border-bottom-width;
          transition-duration: 0.3s;
          transition-timing-function: ease;
        }
        .item-r {
          font-size: 30rpx;
          font-weight: 600;
          color: #333333;
          flex: 1;
          .limit {
            font-weight: 400;
            font-size: 24rpx;
            color: #ff5d15;
            margin-bottom: 10rpx;
            margin-right: 10rpx;
          }
          .name {
            margin-bottom: 20rpx;
            font-weight: 600;
            font-size: 28rpx;
            color: #333333;
          }
          .time {
            font-size: 26rpx;
            color: #999999;
            font-weight: 400;
            margin-bottom: 12rpx;
          }
          .rules {
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
            .text {
              color: #999;
            }
            // .rules-tit {
            //   display: flex;
            //   align-items: center;
            // }
          }
        }
        .item-b {
          width: 116rpx;
          height: 64rpx;
          background: #009a44;
          border-radius: 32rpx;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          line-height: 64rpx;
        }
        .icon {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
    .no-data {
      position: fixed;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 28rpx;
      color: #cccccc;
      image {
        width: 200rpx;
        height: 142rpx;
      }
    }
  }
}
::v-deep {
  .uni-collapse-item__title-box {
    padding: 0;
    height: 28rpx;
    line-height: 28rpx;
  }
}
</style>
